import React, { useContext } from "react";
import classNames from 'classnames'
import { MenuContext } from './menu'

export interface MenuItemProps {
  index?: string;
  disable?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

const MenuItem: React.FC<MenuItemProps> = (props: MenuItemProps) => {
  const { index, disable, className, style, children } = props
  const context = useContext(MenuContext)
  const classes = classNames('menu-item', className, {
    'is-disabled': disable,
    'is-active': context.index === index
  })
  const handleClick = () => {
    if (context.onSelect && (typeof index === 'string') && !disable) {
      context.onSelect(index)
    }
  }
  return (
    <li className={classes} style={style} onClick={handleClick} data-index={index}>
      {children}
    </li>
  )
}

// MenuItem's return type is React.FC<MenuItemProps>
// so MenuItem have the props like defaultProps, displayName
MenuItem.displayName = 'menuItem'

export default MenuItem